<template>
    <div class="w-full h-full box-border flex flex-col overflow-y-hidden min-w-fit">
        <header class="flex-none block">
            <div class="h-[68px] text-base text-third cursor-pointer touchable-opacity flex flex-row items-center gap-[6px]">
                <GpFontIcon name="icon-jiantou_zuo" class="text-2xl !leading-6" @click="$router.back()" />
                <span @click="$router.back()">返回上一级</span>
            </div>
        </header>
        <main class="flex-1 overflow-y-hidden no-scrollbar">
            <div class="w-full h-full items-stretch flex flex-row">
                <section class="flex-none">
                    <div class="h-full flex flex-col gap-3 overflow-y-hidden">
                        <div class="flex flex-row items-center flex-none bg-white h-[68px] px-5 rounded-t-xl pr-4" style="box-shadow: 0 4px 20px 0 #2e294d0f; width: 580px;">
                            <div class="flex flex-row justify-center items-center size-[28px] rounded-full flex-none mr-[10px] bg-theme">
                                <img src="/images/ai-knows-card-icon.png" :width="14" :height="14" class="w-[14px] h-[14px] object-cover" />
                            </div>
                            <p class="text-xl font-bold text-primary">{{data?.name}}</p>
                        </div>
                        <div class="flex-1 overflow-y-auto pr-4">
                            <ul class="flex flex-col gap-3" v-if="details.length > 0">
                                <li style="box-shadow: 0 4px 20px 0 #2e294d0f; width: 580px;"
                                    class="rounded-xl bg-white pt-6 pb-8 pr-[52px] pl-5 overflow-hidden relative touchable-opacity left-card-item"
                                    :class="item.id === currentEntry?.id ? 'left-card-item__current' : ''"
                                    v-for="(item, index) in details"
                                    :key="item.id"
                                    @click="handleSwitchItem(item, index)"
                                >
                                    <section class="flex gap-[10px]">
                                        <span class="text-theme text-base flex-none" style="font-family: 'Alimama FangYuanTi VF'; font-weight: Bold-Square;letter-spacing: 1.92px;">Q:</span>
                                        <p class="text-base font-bold text-primary left-card-item-title">{{index + 1}}、{{ item.question }}</p>
                                    </section>
                                    <section class="flex gap-[10px] mt-[10px]">
                                        <span class="text-[#0DAF7B] text-base flex-none" style="font-family: 'Alimama FangYuanTi VF'; font-weight: Bold-Square;letter-spacing: 1.92px;">A:</span>
                                        <p class="text-sm font-normal text-third maxline2">
                                            {{ item.answer || '-' }}
                                        </p>
                                    </section>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
                <section class="bg-white rounded-xl flex-1 min-w-[740px]">
                    <div v-if="established" class="pt-[210px] flex flex-col items-center">
                        <img src="/images/aiknows-finished.png" :width="200" :height="200" class="size-[200px] block object-cover mb-3" />
                        <p class="text-primary font-bold text-[28px] leading-9 mb-4">恭喜你已完成知识库搭建！</p>
                        <p class="text-base text-[#324366] mb-10">你可以返回查看知识库，新增更多问答哦！</p>
                        <RouterLink :to="{name: 'AIKnownDetailPage', params: { id: data?.id }}" replace
                            class="flex flex-row justify-center items-center !bg-theme !text-white rounded-md text-base h-12 w-[200px]"
                        >
                            查看知识库
                        </RouterLink>
                    </div>
                    <div class="p-18" v-else-if="currentEntry">
                        <div class="box-border">
                            <h3 class="text-xl text-primary font-bold mb-8">
                                {{currentEntry.index + 1}}、{{currentEntry.question}}
                            </h3>
                            <!-- 工作时间回答 -->
                            <div class="box-border" v-if="currentEntry.scene === EnumScene.工作时间">
                                <div class="flex flex-row items-center gap-3 mb-6">
                                    <label class="text-sm text-secondary whitespace-nowrap">休息制度：</label>
                                    <a-space :size="12" wrap>
                                        <div class="flex flex-row justify-center items-center w-25 h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                                            :class="currentEntry.ui.restMode === item.value ? '!border-theme !text-theme !bg-theme/4' : ''"
                                            v-for="item in workTimeOptions"
                                            :key="item.value"
                                            @click="currentEntry.ui.restMode = item.value"
                                        >
                                            {{ item.label }}
                                        </div>
                                    </a-space>
                                </div>
                                <div class="flex flex-row items-center gap-3 mb-6">
                                    <label class="text-sm text-secondary">工作时间：</label>
                                    <a-space :size="8" align="center">
                                        <TimePicker v-model:value="currentEntry.ui.workStart" format="HH:mm" style="width: 160px;">
                                            <template #suffixIcon>
                                                <GpFontIcon name="icon-rili" />
                                            </template>
                                        </TimePicker>
                                        <span class="text-primary text-sm">~</span>
                                        <TimePicker v-model:value="currentEntry.ui.workEnd" format="HH:mm" style="width: 160px;">
                                            <template #suffixIcon>
                                                <GpFontIcon name="icon-rili" />
                                            </template>
                                        </TimePicker>
                                    </a-space>
                                </div>
                            </div>
                            <!-- 加班回答 -->
                            <div class="box-border" v-else-if="currentEntry.scene === EnumScene.加班">
                                <div class="flex flex-row items-center gap-3 mb-6">
                                    <label class="text-sm text-secondary whitespace-nowrap">休息制度：</label>
                                    <a-space :size="12" wrap>
                                        <div class="flex flex-row justify-center items-center w-25 h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                                            :class="currentEntry.ui.restMode === item.value ? '!border-theme !text-theme !bg-theme/4' : ''"
                                            v-for="item in workContinueOptions"
                                            :key="item.value"
                                            @click="currentEntry.ui.restMode = item.value"
                                        >
                                            {{item.label}}
                                        </div>
                                    </a-space>
                                </div>
                            </div>
                            <!-- 公司地址回答 -->
                            <div class="box-border" v-else-if="currentEntry.scene === EnumScene.工作地点">
                                <div class="flex flex-row items-center gap-3 mb-6">
                                    <label class="text-sm text-secondary whitespace-nowrap">工作地址：</label>
                                    <a-select v-model:value="currentEntry.ui.place" :options="addressListOptions" placeholder="请选择工作地址" class="fuck-select" style="height: 36px; width: 320px;" />
                                </div>
                            </div>
                            <!-- 薪资回答 -->
                            <div class="box-border" v-else-if="currentEntry.scene === EnumScene.薪酬">
                                <div class="flex flex-row items-center gap-3 mb-6">
                                    <label class="text-sm text-secondary whitespace-nowrap">薪资结构：</label>
                                    <a-space :size="12" wrap>
                                        <div class="flex flex-row justify-center items-center w-[140px] h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                                            :class="currentEntry.ui.composition === item.value ? '!border-theme !text-theme !bg-theme/4' : ''"
                                            v-for="item in salaryOptions"
                                            :key="item.value"
                                            @click="currentEntry.ui.composition = item.value"
                                        >
                                            {{ item.label }}
                                        </div>
                                    </a-space>
                                </div>
                                <a-space :size="40" align="center">
                                    <div class="flex flex-row items-center gap-3 mb-6" v-if="currentEntry.ui.composition === EnumMemberSalaryType.固定薪资">
                                        <label class="text-sm text-secondary whitespace-nowrap">固定薪资：</label>
                                        <InputNumber v-model:value="currentEntry.ui.salary" :min="0" placeholder="请输入固定薪资" style="height: 36px; width: 140px;" />
                                    </div>
                                    <template v-else>
                                        <div class="flex flex-row items-center gap-3 mb-6">
                                            <label class="text-sm text-secondary whitespace-nowrap">最低底薪：</label>
                                            <InputNumber v-model:value="currentEntry.ui.salaryMin" :min="0" placeholder="请输入最低底薪" style="height: 36px; width: 140px;" />
                                        </div>
                                        <div class="flex flex-row items-center gap-3 mb-6">
                                            <label class="text-sm text-secondary whitespace-nowrap">一般收入：</label>
                                            <InputNumber v-model:value="currentEntry.ui.salary" :min="0" placeholder="请输入一般收入" style="height: 36px; width: 140px;" />
                                        </div>
                                    </template>
                                </a-space>
                            </div>
                            <!-- 试用期回答 -->
                            <div class="box-border" v-else-if="currentEntry.scene === EnumScene.试用期">
                                <a-space :size="40" align="center">
                                    <div class="flex flex-row items-center gap-3 mb-6">
                                        <label class="text-sm text-secondary whitespace-nowrap">试用期时长：</label>
                                        <InputNumber v-model:value="currentEntry.ui.duration" :min="0" :max="12" placeholder="请输入时长(0~12)" style="height: 36px; width: 140px;" />
                                        <span class="text-sm text-secondary whitespace-nowrap">个月</span>
                                    </div>
                                    <div class="flex flex-row items-center gap-3 mb-6">
                                        <label class="text-sm text-secondary whitespace-nowrap">试用期底薪：</label>
                                        <InputNumber v-model:value="currentEntry.ui.salaryMin" :min="0" placeholder="请输入底薪" style="height: 36px; width: 140px;" />
                                        <span class="text-sm text-secondary whitespace-nowrap">元/月</span>
                                    </div>
                                </a-space>
                            </div>
                            <!-- 福利回答 -->
                            <div class="box-border" v-else-if="currentEntry.scene === EnumScene.福利">
                                <div class="flex flex-row items-center gap-3 mb-6">
                                    <a-space :size="12" v-if="currentEntry.extendOptionsNormalized" wrap>
                                        <div class="flex flex-row justify-center items-center min-w-25 px-5 box-content h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                                            :class="currentEntry.ui.chooses.includes(item.value) ? '!border-theme !text-theme !bg-theme/4' : ''"
                                            v-for="item in currentEntry.extendOptionsNormalized"
                                            :key="item.value"
                                            @click="handleSelectMultiple(currentEntry,item.value)"
                                        >
                                            {{ item.label }}
                                        </div>
                                    </a-space>
                                </div>
                            </div>
                            <!-- 出差回答 -->
                            <div class="box-border" v-else-if="currentEntry.scene === EnumScene.出差">
                                <div class="flex flex-row items-center gap-3 mb-6">
                                    <a-space :size="12" v-if="currentEntry.extendOptionsNormalized" wrap>
                                        <div class="flex flex-row justify-center items-center min-w-25 px-5 box-content h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                                            :class="currentEntry.ui.choose === item.value ? '!border-theme !text-theme !bg-theme/4' : ''"
                                            v-for="item in currentEntry.extendOptionsNormalized"
                                            :key="item.value"
                                            @click="currentEntry.ui.choose = item.value"
                                        >
                                            {{ item.label }}
                                        </div>
                                    </a-space>
                                </div>
                            </div>
                            <!-- 单选回答 -->
                            <div class="box-border" v-else-if="currentEntry.scene === EnumScene.扩展 && currentEntry.extendType === EnumKnowledgeExtendType.单选">
                                <div class="flex flex-row items-center gap-3 mb-6">
                                    <a-space :size="12" v-if="currentEntry.extendOptionsNormalized" wrap>
                                        <div class="flex flex-row justify-center items-center min-w-25 px-5 box-content h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                                            :class="currentEntry.ui.choose === item.value ? '!border-theme !text-theme !bg-theme/4' : ''"
                                            v-for="item in currentEntry.extendOptionsNormalized"
                                            :key="item.value"
                                            @click="currentEntry.ui.choose = item.value"
                                        >
                                            {{ item.label }}
                                        </div>
                                    </a-space>
                                </div>
                            </div>
                            <!-- 多选回答 -->
                            <div class="box-border" v-else-if="currentEntry.scene === EnumScene.扩展 && currentEntry.extendType === EnumKnowledgeExtendType.多选">
                                <div class="flex flex-row items-center gap-3 mb-6">
                                    <a-space :size="12" v-if="currentEntry.extendOptionsNormalized" wrap>
                                        <div class="flex flex-row justify-center items-center min-w-25 px-5 box-content h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                                            :class="currentEntry.ui.chooses.includes(item.value) ? '!border-theme !text-theme !bg-theme/4' : ''"
                                            v-for="item in currentEntry.extendOptionsNormalized"
                                            :key="item.value"
                                            @click="handleSelectMultiple(currentEntry,item.value)"
                                        >
                                            {{ item.label }}
                                        </div>
                                    </a-space>
                                </div>
                            </div>
                            <div class="box-border">
                                <div class="mb-3">
                                    <label class="text-sm font-normal text-secondary">回复内容：</label>
                                </div>
                                <a-textarea v-model:value="currentEntry.ui.reply" placeholder="请输入回复内容" :rows="6" style="width: 100%;" />
                                <p class="text-sm font-normal text-secondary mt-4">AI生成仅做参考，请修改核实信息无误后再提交</p>
                            </div>
                            <a-space :size="20" style="margin-top: 56px;">
                                <div class="flex justify-center items-center h-10 px-10 rounded-md border border-solid border-theme text-theme"
                                    :class="disableState.prev ? 'cursor-not-allowed' : 'touchable-opacity hover:bg-theme/8'"
                                    @click="prevHandler()"
                                >
                                    返回上一题
                                </div>
                                <div class="flex justify-center items-center touchable-opacity h-10 px-10 rounded-md bg-theme text-white hover:bg-[#0F60D9]"
                                    @click="nextHandler()"
                                >
                                    保存进入下一题
                                </div>
                            </a-space>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>
</template>
<script lang="ts" setup>
import { TimePicker, InputNumber, message } from 'ant-design-vue'
import { getKnowledgeKnowledgedetailsKnowledgeId, putKnowledgeKnowledgedetaileditId } from '@/api/siderBar/knowledge'
import { EnumKnowledgeExtendType, EnumMemberSalaryType, EnumScene, type KnowledgeDetailResult } from '@/api/siderBar/model'
import { useAppStore } from '@/stores'
import type { EntryType } from './types'
import { createEntry, workTimeOptions, workContinueOptions, salaryOptions, validateEntry, handleSelectMultiple } from './helper'
import { getJobGetjobaddresss } from '@/api/siderBar/job'

defineOptions({
    name: 'AIKnownStartAddPage'
})
definePage({
    name: 'AIKnownStartAddPage',
    meta: {
        title: '岗位知识库搭建',
        isLayout: false,
        navMatchedName: "AIKnownsPage"
    }
})
const route = useRoute()
const appStore = useAppStore()
const established = ref(false)
const currentEntry = ref<INullable<EntryType>>(null)
const details = ref<KnowledgeDetailResult[]>([])
const { data, refreshAsync } = useRequest(() => getKnowledgeKnowledgedetailsKnowledgeId(route.params.id), {
    onBefore() {
        appStore.toggleLoading(true)
    },
    onAfter() {
        appStore.toggleLoading(false)
    },
    onSuccess() {
        if (data.value && data.value.details) {
            details.value = data.value.details.concat()
            if (!currentEntry.value) {
                handleSwitchItem(data.value.details[0], 0)
            }
        }
        import.meta.env.DEV && console.log('data', data.value)
    }
})
const { disableState, prev, next, assign } = usePrevNext(() => details.value.map(l => l.id))
const { data: addressList } = useRequest(() => getJobGetjobaddresss(), {
    initialData: []
})
const addressListOptions = computed(() => {
    return addressList.value!.map(l => {
        return {
            value: l.id,
            label: `${l.regionName}${l.address}`
        }
    })
})
function prevHandler() {
    prev(prevId => {
        const index = toValue(details).findIndex(l => l.id === prevId)
        if (~index) {
            handleSwitchItem(details.value[index], index)
        }
    })
}
async function nextHandler() {
    if (!currentEntry.value) return
    const params = validateEntry(currentEntry.value)
    if (!params) return
    try {
        appStore.toggleLoading(true)
        await putKnowledgeKnowledgedetaileditId(currentEntry.value.id, params)
        await refreshAsync()
        appStore.toggleLoading(false)
        message.success('保存成功')
        if (disableState.value.next) {
            established.value = true
        } else {
            next(nextId => {
                const index = toValue(details).findIndex(l => l.id === nextId)
                if (~index) {
                    handleSwitchItem(details.value[index], index)
                }
            })
        }
    } catch (error) {
        appStore.toggleLoading(false)
    }
}
function handleSwitchItem(item: KnowledgeDetailResult, index: number) {
    if (currentEntry.value?.id !== item.id) {
        currentEntry.value = createEntry(item, index)
        assign(currentEntry.value.id)
    }
}
</script>
<style lang="less" scoped>
.left-card-item {
    &.left-card-item__current {
        .left-card-item-title {
            color: var(--color-theme);
        }
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--color-theme);
            opacity: .5;
        }
    }
}
</style>